<template>
    <div class="chart" ref="chart" ></div>
</template>
<script>
import echarts from '@/lib/echarts'
import { getElementSize, getMax } from '@/lib/util'
export default {
      props: {
        titles: {type: Array, default: () => {return []}},
        values: {type: Array, default: () => {return []}},
        unit: {type: String, default: ''},
        names: {type: Array, default: () => {return []}},
        name: {type: String, default: ''},
        text:{type: Array, default: () => {return []}}
    },
    data() {
        return {
            chart: null //echart图表对象
        }
    },
    watch: {
        '$store.state.windowResizeState' () { //监听浏览器窗口变化
            this.reDraw()
        },
        'values' () {
            this.init()
        }
    },
      mounted() {
        const that = this
        that.init()
    },
    methods: {
        init () {   //实例化图表
            const that = this
            const size = getElementSize(that.$el)
            if(!that.chart) {
                that.chart = echarts.init(that.$refs.chart,false)
            }
            const rm = that.$store.state.windowSize.rm
            const max = getMax(that.values)
            // const count = that.values.length
              that.chart.resize()
            const option = {
    grid: {
        left: '5%',
        right: '10%',
        bottom: '5%',
        top: '15%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
             type: "none", 
        }
    },
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: [{
        type: 'category',
        inverse: true,
        axisLabel: {
            show: true,
            margin:20,
            interval: 'auto',
            textStyle: {
                color: '#ddd'
            },
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        data: that.text
    }],
    series: [{
            type: 'bar',
            zlevel: 1,
            label: {
                    show: true,
                    position: "right", //每一条的数据位置
                    textStyle: {
                       color: '#ddd'
                     }
                  },
            itemStyle: {
                normal: {
                    barBorderRadius: 3,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgb(57,89,255,1)'
                    }, {
                        offset: 1,
                        color: 'rgb(46,200,207,1)'
                    }]),
                },
            },
            barWidth: 10,
            data: that.values,
           animationDuration:6000,
        }
        
    ]
};
            that.chart.setOption(option, true)
        },
        reDraw () { //重绘图表
            const that = this
            if(that.chart) {
                that.chart.resize()
            }else {
                that.init()
            }
        },
    },
    beforeDestroy () {
        const that = this
        if(that.chart){
            that.chart.dispose()
            that.chart = null
        }
    }
}
</script>
<style>
.chart{
    width:100%!important;
    height:100%!important;
}
</style>